<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>搜索</title>
    <meta name="keywords" content="搜索" />
    <meta name="description" content="搜索" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/public.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/classify.css}">
</head>
<body>
<div class="main classify">
    <div class="main_con c323232 ftc">
        <div class="title">
            <!--<p class="ft17 bold bgfff">搜索</p>-->
            <a th:href="@{/wap/search}" class="db inputtext bgfff">
                <div class="flex flex-pj flex-ac">
                    <img th:src="@{/shoppingApi/images/search.png}">
                    <input type="text" name="" placeholder="热门宝贝" class="it1">
                </div>
            </a>
        </div>
        <div class="content rela">
            <div class="left bgf0f0f0">
                <ul >
                    <li th:if="${numbers1.first==true}" class="active" th:each="YJclassfy,numbers1:${map.yjclassifyList}">
                        <a th:href="${'#class-'+YJclassfy.classId}"><span class="active" th:text="${YJclassfy.classifyName}"></span></a>
                    </li>
                    <li th:if="${numbers1.first==false}"   th:each="YJclassfy,numbers1:${map.yjclassifyList}">
                        <a th:href="${'#class-'+YJclassfy.classId}"><span class="active yjclassify-name" th:text="${YJclassfy.classifyName}"></span></a>
                    </li>

                </ul>
            </div>
            <div class="right ft13 classify-product" allow="yes">
                <div  th:each="YJclassfy,numbers1:${map.yjclassifyList}">
                    <div class="right_title rela">
                        <span class="ft13 fl yjclassify-name"  th:text="${YJclassfy.classifyName}"></span>
                        <!--<span class="ft13 fl" th:text="${rjClassfy.classifyName}"></span>-->
                        <input type="hidden"  class="productId"  name="productId" th:value="${YJclassfy.classId}" >
                        <!--<a class="fr mr arrow" th:href="@{/productSJClassify}"></a>-->
                    </div>
                    <ul class="rjClassfy" th:id="${'class-'+YJclassfy.classId}">
                        <!--<li th:each="rjClassfy,rjClassfyStatu:${map}">-->

                            <!--<a class="db" th:href="@{'/wap/selectProductSjClassfy?rjClassId='+${rjClassfy.classId}}">-->
                                <!--<img th:attr="src=@{${rjClassfy.rjClassifyImg}}">-->
                                <!--<span  th:text="${rjClassfy.classifyName}"></span>-->
                            <!--</a>-->
                        <!--</li>-->
                    </ul>
                </div>
            </div>
        </div>
        <div class="fixedBox50">
            <ul class="fixed-bottom bottom flex flex-pc ftc bgfff nft10 c323232">
                <li class="it1">
                    <a th:href="@{/wap/productIndex}" class="db">
                        <span class="img"></span>
                        <span>首页</span>
                    </a>
                </li>
                <li class="it1 active">
                    <a class="db">
                        <span class="img"></span>
                        <span>分类</span>
                    </a>
                </li>
                <li class="it1">
                    <a th:href="@{/wap/getCartList}" class="db">
                        <span class="img"></span>
                        <span>购物车</span>
                    </a>
                </li>
                <li class="it1">
                    <a th:href="@{/wap/openUserCenter}" class="db">
                        <span class="img"></span>
                        <span>我的</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script type="application/javascript" th:src="@{/shoppingApi/js/common.js}"></script>
<script type="text/javascript" th:src="@{/shoppingApi/js/lazyload.min.js}"></script>
<script type="application/javascript" >

    /*点击分类*/
    $(".left li").on('click',function(){
        $(".content .right").attr("allow","no")
        if(!$(this).hasClass("active")){
            var index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            var heightal=0;
            for(var i=0;i<index;i++){
                heightal += Number($(".content .right>div").eq(i).height())+2;
            }
            $(".content .right").stop().animate({
                scrollTop: heightal
            }, 400,'swing',function () {
                setTimeout(function () {
                    $(".content .right").attr("allow","yes")
                },100)
            })

        }else{
        }
    })
    var indexli =[];
    $(".content .right>div").each(function (index,val) {
        if(index == 0){
            indexli[index] =50
        }else{
            var last = indexli[index-1]+2;
            indexli[index] = $(val).height() + last;
        }
    })
    /*监听滚动*/
    var liheight =$(".left li").outerHeight();
    var liAllnumber = $(".left").height();

    // $(".content .right").scroll(function() {
    //     if($(".content .right").attr("allow") == "yes"){
    //         var scrollnow = Number($(".content .right").scrollTop());
    //         for(var i=0;i<indexli.length;i++){
    //             if(scrollnow <=indexli[0]){
    //                 scrollright(0)
    //             }else if(scrollnow>=indexli[indexli.length]){
    //                 scrollright(indexli.length)
    //             }else if(scrollnow > indexli[i] && scrollnow<=indexli[i+1]){
    //                 scrollright(i)
    //                 return
    //             }
    //         }
    //     }
    // });

    function scrollright(i) {
        $(".left li").eq(i).addClass("active").siblings().removeClass("active");
        var liselftop = $(".left li").eq(i).offset().top + liheight;
        if(liselftop > liAllnumber){
            var scrollnum = (i+1)* liheight-$(".left").height();
            $(".left").stop().animate({
                scrollTop: scrollnum
            }, 300)
        }else{
            $(".left").stop().animate({
                scrollTop: 0
            }, 300)
        }
    }
/*加载二级分类数据*/

$(function () {
    var numArr = new Array();
    $('.productId').each(function(){
        numArr.push($(this).val());//添加至数组
    });
    console.log(numArr);
    /*遍历数组*/
    for(var i=0;i<numArr.length;i++){
        var  classId=numArr[i];
        (function (id) {
            $.ajax({
                url:'/wap/getAllRJClassifyByYJClassId?classId='+id,
                success:function (result) {
                    $('#class-'+id).html(getClassifyData(result.rjClassfyList));
                    $(".lazyload").lazyload();
                }
            })
        })(classId);
    }
})

function getClassifyData(classifyData) {
    var str="";
    $.each(classifyData,function (i,item) {
        // console.log(item.classId);
         var imgurl='http://xlspic.ycsqd.com'+item.rjClassifyImg;
        str+='<li>'+
                '<a class="db sjClassify-a">' +
                    '<img class="lazyload" src="/shoppingApi/images/thumbnail.jpg" data-src= '+imgurl+'>'+
                    '<span>'+item.classifyName+'</span>' +
                    '<input type="hidden" name="productId" value="'+item.classId+'">'+'</input>' +
                '</a>' +
            '</li>';
    })
    return str;
}

$('.rjClassfy').on('click','.sjClassify-a',function () {
    var classId=$(this).children('input').val();
    window.location.href="/wap/selectProductSjClassfy?rjClassId="+classId;
})

</script>
</html>


